<template>
  <div class="m-skeleton" :class="clazz" :style="comStyle"></div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "MSkeleton",
});
</script>

<script lang="ts" setup>
import { computed } from "vue";

const props = defineProps({
  type: {
    type: String,
    default: "line",
  },
  active: {
    type: Boolean,
    default: true,
  },
  size: {
    type: Number,
    default: 16,
  },
  width: {
    type: [Number, String],
    default: "100%",
  },
});

const clazz = computed(() => {
  return [`m-skeleton__${props.type}`, props.active ? "is-active" : ""];
});

const comStyle = computed(() => {
  if (props.type === "line") {
    return {
      height: props.size + "px",
      width: typeof props.width === "number" ? props.width + "px" : props.width,
    };
  } else if (props.type === "round") {
    return {
      height: props.size + "px",
      width: props.size + "px",
    };
  }
  return {};
});
</script>
